<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
                        <i class="layui-icon layui-icon-search"></i>查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="deptTree"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="data-table" lay-filter="data-table-filter"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarLeftTpl">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md layui-hide" lay-event="batchDelete">
        <i class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>
<script type="text/html" id="operationTpl">
    <button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="detail" title="详情"><i class="layui-icon layui-icon-eye"></i></button>
    <button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="authorization" title="菜单权限"><i class="layui-icon layui-icon-auz"></i></button>
    <button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="resetPassword" title="重置密码"><i class="layui-icon layui-icon-refresh-1">重置密码</i></button>
    <button class="pear-btn pear-btn-xs pear-btn-danger layui-hide" lay-event="delete" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery','layer', 'admin', 'dict', 'tree'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let admin = layui.admin;
        let dict = layui.dict;
        let tree = layui.tree;

        $.get('/vtl-dept/layuiTree', function(result){
            tree.render({
                elem: '#deptTree',
                data: result,
                showCheckbox: false,  // 是否显示复选框
                showLine: true,  // 是否开启连接线
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                //id: 'deptTree',
                isJump: false, // 是否允许点击节点时弹出新窗口跳转
                click: function(obj) {
                    let data = obj.data;  //获取当前点击的节点数据
                    window.refresh({ deptId: obj.data.id });
                }
            });
        });

        let cols = [[
            { type: 'checkbox', hide: true },
            { field: 'id', title: 'ID', width: 200, hide: true },
            { field: 'username', title: '账号', width: 120 },
            { field: 'nickname', title: '姓名', width: 120 },
            { field: 'gender', title: '性别', width: 70, templet: function(d) {
                return dict.label('vtl_user_gender', d.gender, true);
            } },
            { field: 'idCardNumber', title: '身份证号', hide: true },
            { field: 'email', title: '邮箱' },
            { field: 'mobilePhone', title: '电话', width: 150 },
            { field: 'disabled', title: '账号状态', width: 120, event: 'disabled', templet: function(d) {
                return dict.labelButton('vtl_disabled', d.disabled, true);
            } },
            { field: 'createByName', title: '创建者', width: 120, hide: true },
            { field: 'createTime', title: '创建时间', width: 160, hide: true, templet: function (d) {
                return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
            }},
            { field: 'updateByName', title: '更新者', width: 120, hide: true },
            { field: 'updateTime', title: '更新时间', width: 160, hide: true, templet: function (d) {
                return layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss");
            }},
            { field: 'operation', title: '操作', width: 280, fixed: 'right', templet: '#operationTpl' }
        ]]


        table.render({
            elem: '#data-table',
            url: '/vtl-user/page',
            request: {
                pageName: 'current', // 页码的参数名称，默认：page
                limitName: 'size' // 每页数据条数的参数名，默认：limit
            },
            parseData: function(res) {
                return {
                    "code": 0,
                    "msg": 'SUCCESS',
                    "count": res.total,
                    "data": res.records
                };
            },
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#toolbarLeftTpl',
            defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
        });

        table.on('toolbar(data-table-filter)', function(obj) {
            if (obj.event === 'add') {
                window.edit();
            } else if (obj.event === 'batchDelete') {
                window.batchDelete();
            } else if (obj.event === 'refresh') {
                window.refresh(true);
            }
        });

        table.on('tool(data-table-filter)', function(obj) {
            let row = obj.data;
            switch (obj.event) {
                case 'detail':
                    window.detail(row.id);
                    break;
                case 'edit':
                    window.edit(row.id);
                    break;
                case 'resetPassword':
                    window.resetPassword(obj);
                    break;
                case 'delete':
                    window.delete(obj);
                    break;
                case 'disabled':
                    window.setDisabledValue(obj);
                    break;
                case 'authorization':
                    window.authorization(row.id);
                    break;
                default:
                    break;
            }
        });

        form.on('submit(data-table-query-filter)', function(data) {
            window.refresh(data.field);
            return false;
        });

        window.refresh = function(field = {}, deep = false) {
            $.vtl.tableReloadData('data-table', field, deep);
        }

        window.edit = function(id) {
            let url = 'edit.html' + ($.vtl.isBlank(id) ? '' : ('?id=' + id));
            $.vtl.openLayer(url, { title: '编辑', area: [ '60%', '90%' ] });
        }

        window.resetPassword = function(obj) {
            layer.confirm('确定重置密码？', { icon: 3, title: '提示' }, function(index) {
                layer.close(index);
                $.post('/vtl-user/resetPassword/' + obj.data.id);
            });
        }

        window.delete = function(obj) {
            layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
                layer.close(index);
                $.delete('/vtl-user/' + obj.data.id, function(result) {
                    if (result.code == 200) {
                        obj.del();
                    }
                });
            });
        }

        window.setDisabledValue = function(obj) {
            layer.confirm('确定切换【启用/停用】状态？', { icon: 3, title: '提示' }, function(index) {
                layer.close(index);
                $.post('/vtl-user/setDisabledValue/' + obj.data.id, { disabled: !obj.data.disabled }, function(result) {
                    if (result.code == 200) {
                       window.refresh(true);
                    }
                });
            });
        }

        window.detail = function(id, title = '用户详情') {
            top.layui.admin.jump('vtl-user-' + id, title, 'views/system/user/detail.html?id=' + id)
        }

        window.authorization = function(id) {
            let _this = this;
            let success = function(layero, index, that) {
                // 得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                // var iframeWin = window[layero.find('iframe')[0]['name']];
                // iframeWin.init($('#userAvatar').attr('src'));
            };
            let yes = function(index, layero, that) {
                // var $body = layui.layer.getChildFrame('body', index);
                // var $sourceImage = layui.layer.getChildFrame('#sourceImage', index);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                let checkedMenuIdList = iframeWin.getCheckedIdList();
                $.post('/vtl-user/setMenu/' + id, { menuIdList: checkedMenuIdList }, function(result) {
                    if(result.code == 200) {
                        layer.close(index);
                    }
                });
            };
            $.vtl.openMenuSelector(success, yes, 'user', id);
        }

    })
</script>
</body>
</html>
